import React, { useState } from 'react';
import style from './Recommendedimages.module.css';
import Recommendedimages1 from '../../../assets/images/Recommendedimages/1.png';
import Recommendedimages2 from '../../../assets/images/Recommendedimages/2.png';
import Recommendedimages3 from '../../../assets/images/Recommendedimages/3.png';
import Recommendedimages4 from '../../../assets/images/Recommendedimages/4.png';
import Scienceandtechnology from './Scienceandtechnology/Scienceandtechnology';
import Commercialaffairs from './Commercialaffairs/Commercialaffairs';
import Delicacy from './Delicacy/Delicacy';
import Education from './Education/Education';
import { LeftOutlined } from '@ant-design/icons';
function Recommendedimages() {
    const [selectedContent, setSelectedContent] = useState(null);
    const [isVisible, setIsVisible] = useState(false);

    const handleClick = (content: any) => {
        setSelectedContent(content);
        setIsVisible(true);
    };

    const handleClose = () => {
        setIsVisible(false);
        setSelectedContent(null);
    };
    const images = [
        { src: Recommendedimages1, content: <div className={style.one}><span onClick={() => handleClose()}><LeftOutlined />科技</span><Scienceandtechnology/></div> },
        { src: Recommendedimages2, content: <div className={style.one}><span onClick={() => handleClose()}><LeftOutlined />商务</span><Commercialaffairs/></div> },
        { src: Recommendedimages3, content: <div className={style.one}><span onClick={() => handleClose()}><LeftOutlined />美食</span><Delicacy/></div> },
        { src: Recommendedimages4, content: <div className={style.one}><span onClick={() => handleClose()}><LeftOutlined />教育</span><Education/></div> },
    ];

    return (
        <div className={style.Recommendedimages}>
            <div className={style.top}>
                {images.map((image, index) => (
                    <div
                        key={index}
                        className={style.img}
                        onClick={() => handleClick(image.content)}
                    >
                        <img src={image.src} alt={`推荐图 ${index + 1}`} />
                    </div>
                ))}
            </div>
            {isVisible && (
                <div className={style.content}>
                    {selectedContent}
                </div>
            )}
        </div>
    );
}

export default Recommendedimages;
